<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="title">{{ item.title }}</view>
		</view>

		<view class="wrap-location-bg m-t-30 flex align-center f-28" @click="onChooseLocation">
			<image class="img" :src="$staticImagePath('publish/location.png')" />

			<view>
				{{ area === "" ? "请选择中心位置" : area }}
			</view>
		</view>

		<view class="wrap-list m-t-30 flex">
			<block v-for="(listItem, listIndex) in item.list" :key="listIndex">
				<view
					class="list-item"
					:class="value === listItem.id ? 'list-item-active' : ''"
					@click="onChooseList(item, listIndex)"
				>
					{{ listItem.title }}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 区域
			 */
			area: {
				type: String,
				default: "",
			},
			/**
			 * 经度
			 */
			lat: {
				type: String,
				default: "",
			},
			/**
			 * 纬度
			 */
			lng: {
				type: String,
				default: "",
			},
		},
		methods: {
			/**
			 * 列表选择
			 */
			onChooseList(item, listIndex) {
				const value = this.value;
				const id = item.list[listIndex].id.toString();

				this.$emit("input", id);
			},
			/**
			 * 选择地址
			 */
			onChooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						if (res.errMsg === "chooseLocation:ok") {
							this.$emit("update:lat", res.latitude);
							this.$emit("update:lng", res.longitude);
							this.$emit("update:area", res.address);
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/publish.css";

	.list-item {
		width: 145rpx;
	}

	.wrap-location-bg {
		width: 100%;
		overflow: hidden;
		color: #eb5c20;
		gap: 10rpx;

		.img {
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>
